﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - Shop Cart</title>

    <meta name="author" content="CreativeLayers">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

    <link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->


    <div th:insert="~{header :: #header}"></div>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="/page/index" title="">首页</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-item">
                            <a href="/page/cart" title="">商店</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a h title="">购物车</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="flat-shop-cart">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="flat-row-title style1">
                        <h3>购物车</h3>
                    </div>
                    <div class="table-cart mCustomScrollbar _mCS_1 mCS_no_scrollbar">
                        <div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_horizontal mCSB_inside"
                             style="max-height: none;" tabindex="0">
                            <div id="mCSB_1_container" class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
                                 style="position: relative; top: 0px; left: 0px; width: 499px; min-width: 100%; overflow-x: inherit;"
                                 dir="ltr">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>产品</th>
                                        <th>单价</th>
                                        <th>数量</th>
                                        <th>总</th>
                                    </tr>
                                    </thead>
                                    <tbody id="cart">
                                    <tr th:each="cart:${carts}">
                                        <td>
                                            <div class="img-product">
                                                <img style="width: 75px;height: 57px;"
                                                     th:src="'http://47.94.10.67/images/' + ${cart.foodImg}" alt=""
                                                     class="mCS_img_loaded">
                                            </div>
                                            <div class="name-product" style="line-height: 47px;"
                                                 th:text="${cart.foodName}">

                                            </div>
                                            <div class="price" th:text="${cart.price} + '元'">
                                            </div>
                                            <div class="clearfix"></div>
                                        </td>
                                        <td>
                                            <div class="quanlity">
                                                <span id="sub" class="btn-down"></span>
                                                <input type="hidden" id="foodId" th:value="${cart.foodId}">
                                                <input type="text" name="number" id="quantity" th:value="${cart.quantity}" min="1"
                                                       max="100"
                                                       placeholder="Quanlity">
                                                <span id="add" class="btn-up"></span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="total" th:text="${cart.totalPrice}">

                                            </div>
                                        </td>
                                        <td>
                                            <a th:href="'/cart/deleteById?cartId=' + ${cart.id}" title="">
                                                <img src="/images/icons/delete.png" alt="" class="mCS_img_loaded">
                                            </a>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                            <div id="mCSB_1_scrollbar_horizontal"
                                 class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
                                 style="display: none;">
                                <div class="mCSB_draggerContainer">
                                    <div id="mCSB_1_dragger_horizontal" class="mCSB_dragger"
                                         style="position: absolute; min-width: 30px; width: 0px; left: 0px;">
                                        <div class="mCSB_dragger_bar"></div>
                                    </div>
                                    <div class="mCSB_draggerRail"></div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.table-cart -->
                </div><!-- /.col-lg-8 -->
                <div class="col-lg-4">
                    <div class="cart-totals">
                        <h3><font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">购物车总计</font></font></h3>
                        <form action="#" method="get" accept-charset="utf-8">
                            <table>
                                <tbody>
                                <tr>
                                    <td>小计</td>
                                    <td class="subtotal" th:text="${totalPrice} + '元'"></td>
                                </tr>
                                <tr>
                                    <td><font style="vertical-align: inherit;"><font
                                            style="vertical-align: inherit;">运输</font></font></td>
                                    <td class="btn-radio">

                                        <div class="radio-info">
                                            <input type="radio" id="free-shipping" name="radio-flat-rate">
                                            <label for="free-shipping"><font style="vertical-align: inherit;"><font
                                                    style="vertical-align: inherit;">免费送货</font></font></label>
                                        </div>
                                        <div class="btn-shipping">

                                        </div>
                                    </td><!-- /.btn-radio -->
                                </tr>
                                <tr>
                                    <td>总</td>
                                    <td class="price-total" th:text="${totalPrice} + '元'"></td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="btn-cart-totals">
                                <a href="#" class="update" title="">更新购物车</a>
                                <a href="#" class="checkout" title="">继续结帐</a>
                            </div><!-- /.btn-cart-totals -->
                        </form><!-- /form -->
                    </div><!-- /.cart-totals -->
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="flat-row flat-iconbox style3">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Worldwide Shipping</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Order Online Service</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Payment</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
                <div class="col-lg-3 col-md-6">
                    <div class="iconbox style1">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3>Return 30 Days</h3>
                            </div>
                            <div class="clearfix"></div>
                        </div><!-- /.box-header -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-lg-3 col-md-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-iconbox -->
    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <div th:insert="~{footer :: #footer}"></div>

    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright"> All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->

</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>
</body>
</html>
<script type="text/javascript">
    // 点击添加按钮添加数量
    $("#cart").on('click', '#add', function () {
        var foodId = $(this).prevAll("#foodId").val();
        // alert(foodId)
        window.location.href = '/cart/addCart?foodId=' +foodId + '&quantity=1';
    });

    // 点击减少按钮减少数量
    $("#cart").on('click', '#sub', function () {
        var quantity = $(this).nextAll("#quantity").val();
        // 限制购物车最少数量为1
        if (quantity < 2) {
            return;
        }
        var foodId = $(this).nextAll("#foodId").val();
        window.location.href = '/cart/addCart?foodId=' +foodId + '&quantity=-1';
    });

    // 鼠标离开事件更改购物车
    $("#cart").on('change', '#quantity', function () {
        var quantity = $(this).val();
        // 限制购物车最少数量为1
        // alert(quantity);
        if (quantity < 2) {
            alert("请至少输入大于1的数字")
            return;
        }
        var foodId = $(this).prevAll("#foodId").val();
        window.location.href = '/cart/addCart?foodId=' +foodId + '&quantity=' + quantity;
    });



</script>